<template>
  <div class="Appointmentsetting">
    <div style="width:1100px;height:500px" @click="dj()">
       <el-calendar v-model="value">
         <template slot="dateCell" slot-scope="{data}">
         <p :class="data.isSelected ? 'is-selected' : ''">{{ data.day.split('-').slice(2).join('') }}
          {{data.isSelected ? setts:''}}<br/> </p>
        </template>
       </el-calendar>
    </div>
    <el-dialog :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="预约日期" :label-width="formLabelWidth">
              <el-date-picker value-format="yyyy-MM-dd" type="date" v-model="form.orderdate" style="width: 180px" :disabled="true">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="可预约人数" :label-width="formLabelWidth">
                <el-input v-model="xx1"  style="width: 180px" @blur="xg()"></el-input>
            </el-form-item>
             <el-form-item label="已预约人数" :label-width="formLabelWidth">
                <el-input v-model="form.orders"  style="width: 180px" :disabled="true"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button round @click="dialogFormVisible = false">取 消</el-button>
            <el-button round type="primary" @click="qd()" :disabled="bj">确 定</el-button>
          </div>
        </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
export default Vue.extend({
  data() {
    //{{data.isSelected ? form.orders:''}}
      return {
        value: new Date(),
        tim:"",
        dialogFormVisible: false,
        xx1:"",
        bj:false,
         form: {

           //当前时间可预约人数
          number: "",

          //当前时间
          orderdate:'',

          //当前时间已预约人数
          orders:"",
        },
        kyy:"可预约：",
        yyy:"已预约：",
        setts:"",
        formLabelWidth: '120px',
      }
    },
    methods:{
      xg(){
        if(this.xx1<=this.form.orders){
          this.bj=true
           this.$message({
              type: 'warning',
              message: '可预约人数不能小于已预约人数！！!'
            });
        }else{
          this.bj=false
        }
      },
      dj(){
        this.form={};
        this.dialogFormVisible = true
        //获取当前时间（yyyy-MM-dd）
        var dd = new Date(this.value);
        var y = dd.getFullYear();
        var m = (dd.getMonth() + 1).toString().padStart(2, "0");
        var d = dd.getDate().toString().padStart(2, "0");
        this.tim= y + "-" + m + "-" + d;
        this.form.orderdate=this.tim;
        axios.get("/api/torder/getByordate?orderdate="+this.tim).then(data=>{
          //已预约
          this.form.orders=data.data
            this.abc();
        })
      },
      qd(){
        let upd = new Date();
        var y = upd.getFullYear();
        var m = (upd.getMonth() + 1).toString().padStart(2, "0");
        var d = upd.getDate().toString().padStart(2, "0");
        var tim1 = y + "-" + m + "-" + d;
        this.form.number=this.xx1;
        axios.get("/api/torset/getByorderdate?orderdate="+this.tim+"&orderset="+JSON.stringify(this.form)+"&ii="+tim1).then(data=>{
          this.abc()
        })
        this.dialogFormVisible=false
      },
      abc(){
        axios.get("/api/torset/getByorderSett?orderdate="+this.tim).then(res=>{
              //可预约
              this.xx1=res.data.number;
              if(res.data.number==null){
                this.setts=this.kyy+"0"
              }else{
                this.setts=this.kyy+res.data.number
              }
          })
      }
    },
    created(){
      this.abc();
    }
})
</script>
<style scoped>

</style>